
 <!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  
    <title>9102全员学Vue--2.怎么三两下拼出一个页面 | Here. There.</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3, minimum-scale=1">
    
    <meta name="author" content="被删">
    
    <meta name="description" content="本节内容主要包括使用Vue框架过程中需要掌握的一些基本概念，以及怎么使用现有的一些开源库和组件快速创建项目。另外再附赠对状态管理、数据传递的一些方法和理解叭。总而言之，这一节开始会是与Vue紧密相关的内容啦。">
    
    
    
    
    <link rel="alternate" href="/atom.xml" title="Here. There." type="application/atom+xml">
    
    
    <link rel="icon" href="/img/favicon.ico">
    
    
    <link rel="apple-touch-icon" href="/img/pacman.jpg">
    <link rel="apple-touch-icon-precomposed" href="/img/pacman.jpg">
    
    <link rel="stylesheet" href="/css/style.css">
    
<script type="text/javascript">
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?3d902de4a19cf2bf179534ffd2dd7b7f";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

</head>

  <body>
    <header>
      <div>
		
			<div id="imglogo">
				<a href="/"><img src="/img/sun.png" alt="Here. There." title="Here. There."/></a>
			</div>
			
			<div id="textlogo">
				<h1 class="site-name"><a href="/" title="Here. There.">Here. There.</a></h1>
				<h2 class="blog-motto">Love ice cream. Love sunshine. Love life. Love the world. Love myself. Love you.</h2>
			</div>
			<div class="navbar"><a class="navbutton navmobile" href="#" title="菜单">
			</a></div>
			<nav class="animated">
				<ul>
					
						<li><a href="/">首页</a></li>
					
						<li><a href="https://github.com/godbasin/godbasin.github.io">所有文章</a></li>
					
						<li><a href="/archives">归档</a></li>
					
						<li><a href="/categories">分类</a></li>
					
						<li><a href="https://godbasin.github.io/front-end-playground">前端游乐场</a></li>
					
						<li><a href="/about">关于我</a></li>
					
				</ul>
			</nav>			
</div>

    </header>
    <div id="container">
      <div id="main" class="post" itemscope itemprop="blogPost">
	<article itemprop="articleBody"> 
		<header class="article-info clearfix">
  <h1 itemprop="name">
    
      <a href="/2019/07/11/vue-for-everyone-2/" title="9102全员学Vue--2.怎么三两下拼出一个页面" itemprop="url">9102全员学Vue--2.怎么三两下拼出一个页面</a>
  </h1>
  <p class="article-author">By
    
      <a href="https://godbasin.github.io" title="被删">被删</a>
    </p>
  <p class="article-time">
    <time datetime="2019-07-11T15:09:51.000Z" itemprop="datePublished">2019-07-11</time>
    更新日期:<time datetime="2019-07-11T15:20:44.836Z" itemprop="dateModified">2019-07-11</time>
    
  </p>
</header>
	<div class="article-content">
		
		
		<div id="toc" class="toc-article">
			<strong class="toc-title">文章目录</strong>
		<ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Vue基本概念"><span class="toc-number">1.</span> <span class="toc-text">Vue基本概念</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue组件"><span class="toc-number">1.1.</span> <span class="toc-text">Vue组件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#生命周期"><span class="toc-number">1.1.1.</span> <span class="toc-text">生命周期</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#数据"><span class="toc-number">1.1.2.</span> <span class="toc-text">数据</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-菜单"><span class="toc-number">1.1.2.1.</span> <span class="toc-text">1. 菜单</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-列表"><span class="toc-number">1.1.2.2.</span> <span class="toc-text">2. 列表</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#方法"><span class="toc-number">1.1.3.</span> <span class="toc-text">方法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#组件"><span class="toc-number">1.2.</span> <span class="toc-text">组件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#组件的自我修养"><span class="toc-number">1.2.1.</span> <span class="toc-text">组件的自我修养</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Vue-组件"><span class="toc-number">1.2.2.</span> <span class="toc-text">Vue 组件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Element"><span class="toc-number">1.2.3.</span> <span class="toc-text">Element</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-使用-Element"><span class="toc-number">1.2.3.1.</span> <span class="toc-text">1. 使用 Element</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-使用-Element-组件"><span class="toc-number">1.2.3.2.</span> <span class="toc-text">2. 使用 Element 组件</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#页面绑定"><span class="toc-number">1.2.4.</span> <span class="toc-text">页面绑定</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#0-Vue-绑定语法"><span class="toc-number">1.2.4.1.</span> <span class="toc-text">0. Vue 绑定语法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-菜单绑定"><span class="toc-number">1.2.4.2.</span> <span class="toc-text">1. 菜单绑定</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-列表绑定"><span class="toc-number">1.2.4.3.</span> <span class="toc-text">2. 列表绑定</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-表单绑定"><span class="toc-number">1.2.4.4.</span> <span class="toc-text">3. 表单绑定</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#课后作业"><span class="toc-number">1.2.5.</span> <span class="toc-text">课后作业</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#结束语"><span class="toc-number">1.3.</span> <span class="toc-text">结束语</span></a></li></ol></li></ol>
		</div>
		
		<p>本节内容主要包括使用Vue框架过程中需要掌握的一些基本概念，以及怎么使用现有的一些开源库和组件快速创建项目。另外再附赠对状态管理、数据传递的一些方法和理解叭。总而言之，这一节开始会是与Vue紧密相关的内容啦。<br><a id="more"></a></p>
<h1 id="Vue基本概念"><a href="#Vue基本概念" class="headerlink" title="Vue基本概念"></a>Vue基本概念</h1><p>首先，要快速写出来一个 Vue 项目，要先理解一些基本的概念。概念这样的东西，一个个介绍讲解会很枯燥，那既然这一节内容是快速创建一个 Vue 项目，那我们就一边讲怎么写一边介绍相关概念叭。</p>
<p>这里会主要以管理端这样的页面为最终效果，毕竟这是最常见也是最容易写的一类型页面。</p>
<h2 id="Vue组件"><a href="#Vue组件" class="headerlink" title="Vue组件"></a>Vue组件</h2><p>本来想着从指令讲起的，不过既然上一节中介绍了数据驱动的编码思维，那我们就从数据结构设计起，所以直接开始讲 Vue 组件啦。</p>
<h3 id="生命周期"><a href="#生命周期" class="headerlink" title="生命周期"></a>生命周期</h3><p>既然要讲 Vue 组件，那生命周期得先了解下。经过上一节内容的讲解，我们知道在 Vue 中要渲染一块页面内容的时候，会有这么几个过程：<br>1). 解析语法生成 AST。<br>2). 根据 AST 结果，完成 data 数据初始化。<br>3). 根据 AST 结果和 data 数据绑定情况，生成虚拟 DOM。<br>4). 将虚拟 DOM 生成真正的 DOM 插入到页面中，此时页面会被渲染。</p>
<p>当我们绑定的数据进行更新的时候，又会产生以下这些过程：<br>5). 框架接收到数据变更的事件，根据数据生成新的虚拟 DOM 树。<br>6). 比较新旧两棵虚拟 DOM 树，得到差异。<br>7). 把差异应用到真正的 DOM 树上，即根据差异来更新页面内容。</p>
<p>当我们清空页面内容时，还有：<br>8). 注销实例，清空页面内容，移除绑定事件、监听器等。</p>
<p>所以在整个页面或是组件中，我们会有以下的一些关键的生命周期钩子：</p>
<table>
<thead>
<tr>
<th>生命周期钩子</th>
<th>说明</th>
<th>对应上述步骤</th>
</tr>
</thead>
<tbody>
<tr>
<td>beforeCreate</td>
<td>初始化实例前，data 属性等不可获取</td>
<td>1 之后，2 之前</td>
</tr>
<tr>
<td>created</td>
<td>实例初始化完成，此时可获取 data 里数据，无法获取 DOM</td>
<td>2 之后，3 之前</td>
</tr>
<tr>
<td>beforeMount</td>
<td>虚拟 DOM 创建完成，此时未挂载到页面中</td>
<td>3 之后，4 之前</td>
</tr>
<tr>
<td>mounted</td>
<td>数据绑定完成，真实 DOM 已挂载到页面</td>
<td>4 之后</td>
</tr>
<tr>
<td>beforeUpdate</td>
<td>数据更新，DOM Diff 得到差异，未更新到页面</td>
<td>6 之后，7 之前</td>
</tr>
<tr>
<td>updated</td>
<td>数据更新，页面也已更新</td>
<td>7 之后</td>
</tr>
<tr>
<td>beforeDestroy</td>
<td>实例销毁前</td>
<td>8 之前</td>
</tr>
<tr>
<td>destroyed</td>
<td>实例销毁完成</td>
<td>8 之后</td>
</tr>
</tbody>
</table>
<p>这些钩子有什么用呢，我们可以在某些生命周期中做一些事情，例如<code>created</code>事件中，可以拿到基础的数据，并根据这些数据可以开始进行后台请求了。</p>
<h3 id="数据"><a href="#数据" class="headerlink" title="数据"></a>数据</h3><p>假设我们要做一个管理端的页面，包括常见的增删查改，那会包括菜单、列表、表单这几种内容，如图：</p>
<p><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/vue-for-everyone-2-1.jpg" alt=""></p>
<p>既然要使用数据驱动的方式，那么我们先来设计这个页面的数据包括哪些。每一个都可以抽象成一组数据设计，我们一个个详细来看。</p>
<h4 id="1-菜单"><a href="#1-菜单" class="headerlink" title="1. 菜单"></a>1. 菜单</h4><p><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/vue-for-everyone-2-2.jpg" alt=""></p>
<p>如图，我们能看到，菜单列表主要包括父菜单列表，每个父菜单包括：</p>
<ul>
<li>图标 icon</li>
<li>菜单名字 text</li>
<li>（可选）子菜单列表 subMenus<ul>
<li>子菜单名字 text</li>
</ul>
</li>
</ul>
<p>所以，我们可以抽象出这么一个数据结构:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> menus = [</div><div class="line">  &#123;</div><div class="line">    <span class="attr">text</span>: <span class="string">"服务管理"</span>, <span class="comment">// 父菜单名字</span></div><div class="line">    icon: <span class="string">"el-icon-setting"</span>, <span class="comment">// 父菜单图标</span></div><div class="line">    subMenus: [&#123; <span class="attr">text</span>: <span class="string">"服务信息"</span> &#125;, &#123; <span class="attr">text</span>: <span class="string">"新增"</span> &#125;]  <span class="comment">// 子菜单列表</span></div><div class="line">  &#125;,</div><div class="line">  &#123;</div><div class="line">    <span class="attr">text</span>: <span class="string">"产品管理"</span>,</div><div class="line">    <span class="attr">icon</span>: <span class="string">"el-icon-menu"</span>,</div><div class="line">    <span class="attr">subMenus</span>: [&#123; <span class="attr">text</span>: <span class="string">"产品信息"</span> &#125;]</div><div class="line">  &#125;,</div><div class="line">  &#123;</div><div class="line">    <span class="attr">text</span>: <span class="string">"日志信息"</span>,</div><div class="line">    <span class="attr">icon</span>: <span class="string">"el-icon-message"</span></div><div class="line">  &#125;</div><div class="line">];</div></pre></td></tr></table></figure>
<h4 id="2-列表"><a href="#2-列表" class="headerlink" title="2. 列表"></a>2. 列表</h4><p><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/vue-for-everyone-2-3.jpg" alt=""></p>
<p>如图，我们能看到，列表里每行内容包括：</p>
<ul>
<li>日期 date</li>
<li>姓名 name</li>
<li>电话 phone</li>
<li>地址 address</li>
</ul>
<p>我们可以先整理到这么一个数据：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> tableItem = &#123;</div><div class="line">  <span class="attr">date</span>: <span class="string">"2019-05-20"</span>, <span class="comment">// 日期</span></div><div class="line">  name: <span class="string">"被删"</span>, <span class="comment">// 姓名</span></div><div class="line">  phone: <span class="string">"13888888888"</span>, <span class="comment">// 电话</span></div><div class="line">  address: <span class="string">"深圳市南山区滨海大道 888 号"</span> <span class="comment">// 地址</span></div><div class="line">&#125;;</div></pre></td></tr></table></figure>
<p>而在列表这样的增删查改的场景下，一般还需要一个唯一标识来作为标记，这里使用 id，用最简单的方式来拷贝出 20 个数据：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// 此处先以 tableItem 为数据源，拷贝生成 20 个数据，然后再根据索引 index 添加上 id</span></div><div class="line"><span class="keyword">const</span> tableData = <span class="built_in">Array</span>(<span class="number">20</span>).fill(tableItem).map(<span class="function">(<span class="params">x, i</span>) =&gt;</span> &#123;<span class="keyword">return</span> &#123;<span class="attr">id</span>: i + <span class="number">1</span>, ...x&#125;;&#125;);</div><div class="line"><span class="built_in">console</span>.log(tableData[<span class="number">1</span>]);</div><div class="line"><span class="comment">// 例如第 2 个数据为：</span></div><div class="line"><span class="comment">/* &#123;</span></div><div class="line">    address: "深圳市南山区滨海大道 888 号"</div><div class="line">    date: "2019-05-20"</div><div class="line">    id: 2</div><div class="line">    name: "被删"</div><div class="line">    phone: "13888888888"</div><div class="line">&#125; */</div></pre></td></tr></table></figure>
<h3 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h3><p>关于 Vue 的 methods 方法，如果说数据是状态机的话，那事件大概可以当成状态机的扭转。这里以列表作为举例吧，例如新增、删除、上移、下移，我们只需要处理数据就好了：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</div><div class="line">  data() &#123;</div><div class="line">    <span class="comment">// 绑定数据</span></div><div class="line">    <span class="keyword">return</span> &#123;</div><div class="line">      <span class="attr">menus</span>: menus, <span class="comment">// 菜单数据</span></div><div class="line">      tableData: tableData <span class="comment">// 列表数据</span></div><div class="line">    &#125;;</div><div class="line">  &#125;,</div><div class="line">  <span class="attr">methods</span>: &#123;</div><div class="line">    <span class="comment">// 新增一个数据</span></div><div class="line">    addTableItem(item = &#123;&#125;)&#123;</div><div class="line">      <span class="comment">// 添加到列表中，同时自增 id </span></div><div class="line">      <span class="keyword">this</span>.tableData.push(&#123;...item, <span class="attr">id</span>: <span class="keyword">this</span>.tableData.length + <span class="number">1</span>&#125;);</div><div class="line">    &#125;,</div><div class="line">    <span class="comment">// 删除一个数据</span></div><div class="line">    deleteTableItem(id)&#123;</div><div class="line">      <span class="comment">// 查找到对应的索引，然后删除</span></div><div class="line">      <span class="keyword">const</span> index = <span class="keyword">this</span>.tableData.findIndex(<span class="function"><span class="params">x</span> =&gt;</span> x.id === id);</div><div class="line">      <span class="keyword">this</span>.tableData.splice(index, <span class="number">1</span>);</div><div class="line">    &#125;,</div><div class="line">    <span class="comment">// 移动一个数据</span></div><div class="line">    moveTableItem(id, direction)&#123;</div><div class="line">      <span class="keyword">const</span> dataLength = <span class="keyword">this</span>.tableData.length;</div><div class="line">      <span class="comment">// 查找到对应的索引，然后取出，再插入</span></div><div class="line">      <span class="keyword">const</span> index = <span class="keyword">this</span>.tableData.findIndex(<span class="function"><span class="params">x</span> =&gt;</span> x.id === id);</div><div class="line">      <span class="keyword">switch</span>(direction)&#123;</div><div class="line">        <span class="comment">// 上移</span></div><div class="line">        <span class="keyword">case</span> <span class="string">'up'</span>:</div><div class="line">          <span class="keyword">if</span>(index &gt; <span class="number">0</span>) &#123;</div><div class="line">            <span class="comment">// 第一个不进行上移</span></div><div class="line">            <span class="keyword">const</span> item = <span class="keyword">this</span>.tableData.splice(index, <span class="number">1</span>)[<span class="number">0</span>];</div><div class="line">            <span class="keyword">this</span>.tableData.splice(index - <span class="number">1</span>, <span class="number">0</span>, item);</div><div class="line">          &#125;</div><div class="line">          <span class="keyword">break</span>;</div><div class="line">        <span class="comment">// 下移</span></div><div class="line">        <span class="keyword">case</span> <span class="string">'down'</span>:</div><div class="line">          <span class="keyword">if</span>(index &lt; dataLength - <span class="number">1</span>) &#123;</div><div class="line">            <span class="comment">// 最后一个不进行下移</span></div><div class="line">            <span class="keyword">const</span> item = <span class="keyword">this</span>.tableData.splice(index, <span class="number">1</span>)[<span class="number">0</span>];</div><div class="line">            <span class="keyword">this</span>.tableData.splice(index + <span class="number">1</span>, <span class="number">0</span>, item);</div><div class="line">          &#125;</div><div class="line">          <span class="keyword">break</span>;</div><div class="line">      &#125;</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>当我们把数据更新了之后，Vue 会自动帮我们更新到页面里，具体是怎么实现的呢，可以参考上一节的数据绑定的实现、虚拟 DOM 的内容哈。</p>
<h2 id="组件"><a href="#组件" class="headerlink" title="组件"></a>组件</h2><p>数据和事件都写好了，接下来就轮到拼页面了。其实前端写样式是一件很蛋疼的事情，但写页面又是一件很有成就感的事情，所以为了不打击大家的学习热情，我们直接跳过学习调节样式的环节，来到组装页面的环节吧~~</p>
<h3 id="组件的自我修养"><a href="#组件的自我修养" class="headerlink" title="组件的自我修养"></a>组件的自我修养</h3><p>首先我们理解一下，组件是什么呢，个人的理解是（右侧是举例 Vue 中类似的属性或者 API）：</p>
<ul>
<li>组件内维护自身的数据和状态：<code>data</code></li>
<li>组件内维护自身的事件：<code>methods</code>、生命周期钩子</li>
<li>通过提供配置的方式，来控制展示，或者控制执行逻辑：<code>props</code></li>
<li>通过一定的方式（事件触发/监听、API 提供），提供与外界（如父组件）通信的方式：<code>$emit</code>、<code>$on</code></li>
</ul>
<p>如何在一个页面中，抽象出某些组件出来，涉及的篇幅会很长，大家也可以参考前端抽象+配置化系列：<a href="https://godbasin.github.io/2018/05/26/app-component-isolation/">《页面区块化与应用组件化》</a>、<a href="https://godbasin.github.io/2018/06/02/component-with-itself/">《一个组件的自我修养》</a>、<a href="https://godbasin.github.io/2018/06/09/component-with-configuration/">《组件配置化》</a>、<a href="https://godbasin.github.io/2018/06/17/component-communication-with-data-model/">《数据抽离与数据管理》</a>。（真的很多，加油看）</p>
<p>一般来说，我们可以使用所见即所得的方式，例如上面的，菜单就是个组件，或者表格就是个组件，来划分。</p>
<h3 id="Vue-组件"><a href="#Vue-组件" class="headerlink" title="Vue 组件"></a>Vue 组件</h3><p>在 Vue 里，页面也好、某块内容也好，都可以定义为一个组件。而关于组件的，前面也说了会包括生命周期、数据状态、事件处理、模板样式等，基本的可以参考一下<a href="https://cn.vuejs.org/v2/guide/components.html" target="_blank" rel="external">Vue-组件基础</a>，了解一下下面的内容，避免后面直接使用组件的时候有些不了解：</p>
<ul>
<li><a href="https://cn.vuejs.org/v2/api/" target="_blank" rel="external">Vue 组件的 api 包括哪些</a></li>
<li><a href="https://cn.vuejs.org/v2/guide/components.html#data-%E5%BF%85%E9%A1%BB%E6%98%AF%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0" target="_blank" rel="external">data 为什么必须是一个函数</a></li>
<li><a href="https://cn.vuejs.org/v2/guide/components.html#%E7%BB%84%E4%BB%B6%E7%9A%84%E7%BB%84%E7%BB%87" target="_blank" rel="external">组件怎么组织和设计</a></li>
<li><a href="https://cn.vuejs.org/v2/guide/components-slots.html" target="_blank" rel="external">组件的 slot 是什么</a></li>
</ul>
<h3 id="Element"><a href="#Element" class="headerlink" title="Element"></a>Element</h3><p>这套系列的教程，会直接使用 <a href="https://element.eleme.cn/#/zh-CN/component/installation" target="_blank" rel="external">Element</a> 组件。不要误会，没有收取广告费，是因为我们这边大家都要用 Vue + Element 啦，所以教程以自己人为最高优先级。</p>
<h4 id="1-使用-Element"><a href="#1-使用-Element" class="headerlink" title="1. 使用 Element"></a>1. 使用 Element</h4><p>首先，我们把 Element 装上，很简单：</p>
<figure class="highlight cmd"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm i element-ui -S</div></pre></td></tr></table></figure>
<p>官方教程也有教我们怎么在 Vue 里使用，也很简单，在 main.js 中写入以下内容：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span>;</div><div class="line"><span class="keyword">import</span> ElementUI <span class="keyword">from</span> <span class="string">'element-ui'</span>; <span class="comment">// 引入 element 组件</span></div><div class="line"><span class="keyword">import</span> <span class="string">'element-ui/lib/theme-chalk/index.css'</span>; <span class="comment">// 加上 element 样式</span></div><div class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">'./App.vue'</span>;</div><div class="line"></div><div class="line">Vue.use(ElementUI); <span class="comment">// 在 Vue 里使用 Element</span></div><div class="line"></div><div class="line"><span class="comment">// 启动一个 Vue 应用</span></div><div class="line"><span class="keyword">new</span> Vue(&#123;</div><div class="line">  <span class="attr">el</span>: <span class="string">'#app'</span>,</div><div class="line">  <span class="attr">render</span>: <span class="function"><span class="params">h</span> =&gt;</span> h(App)</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h4 id="2-使用-Element-组件"><a href="#2-使用-Element-组件" class="headerlink" title="2. 使用 Element 组件"></a>2. 使用 Element 组件</h4><p>在官网中，我们能找到很多的组件，如图：<br><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/vue-for-everyone-2-4.jpg" alt=""></p>
<p>左侧列表里，全是 Element，接下来就是要拼成一个表单+列表的页面了。</p>
<p>首先我们得去偷个合适的布局，翻到布局容器 Container 这一个组件页面，我们可以看到一个理想的示例：</p>
<p><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/vue-for-everyone-2-5.jpg" alt=""></p>
<p>点开显示代码，然后尽情拷贝吧~~~鉴于上一节我们用 vue-cli 脚手架生成了个 demo，我们就用在这个 demo 里改，由于主页面内容都放在<code>HelloWorld.vue</code>这个文件里，我们就拷进去吧。</p>
<p><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/vue-for-everyone-2-6.jpg" alt=""></p>
<p>粘贴的时候，会发现编辑器有报错？没有比官方代码贴进来直接报错更糟糕的事情了，我们来瞧瞧是因为什么。</p>
<p>上一节我们讲了，浏览器里面会解析 HTML/CSS/Javascript 这三种文件，那<code>.vue</code>是什么鬼来的？<code>.vue</code>文件其实是单文件组件，就是把 HTML/CSS/Javascript 写在一个文件里，对于简单的组件来说其实是件好事情，一眼就能看完它做了什么（不过个人还是喜欢分开几个文件的方式，看个人喜好啦）。我们来看看一个<code>.vue</code>文件包括啥：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"><span class="comment">&lt;!-- my-component.vue --&gt;</span></div><div class="line"><span class="comment">&lt;!-- </span></div><div class="line">  .vue 文件里，</div><div class="line">  使用 &lt;template&gt; 隔离 HTML，</div><div class="line">  使用 &lt;script&gt; 隔离 Javascript，</div><div class="line">  使用 &lt;style&gt; 隔离 CSS</div><div class="line">  --&gt;</div><div class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span>This will be pre-compiled<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></div><div class="line"><span class="comment">&lt;!-- 不喜欢写到一起，script 和 styles 也可以用 src 引入文件 --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./my-component.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">src</span>=<span class="string">"./my-component.css"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></div></pre></td></tr></table></figure>
<p>所以，原来的示例代码里少了<code>&lt;template&gt;&lt;/template&gt;</code>，这里包裹起来就好啦：</p>
<p><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/vue-for-everyone-2-7.jpg" alt=""></p>
<p>然后打开页面，发现跟想象的差不多，除了几处需要调整：</p>
<p><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/vue-for-everyone-2-8.jpg" alt=""></p>
<p>1) Vue logo 要去掉 -&gt; 在<code>App.vue</code>文件里，把<code>&lt;img alt=&quot;Vue logo&quot; src=&quot;./assets/logo.png&quot;&gt;</code>去掉，还有 body 自带的 margin 也去掉。<br>2) 这些滚动条太丑了，干掉！ -&gt; 把<code>&lt;el-container&gt;</code>里的<code>height: 500px;</code>去掉，然后我们调整下</p>
<p>然后我们得到一个这个页面：<br><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/vue-for-everyone-2-9.png" alt=""></p>
<h3 id="页面绑定"><a href="#页面绑定" class="headerlink" title="页面绑定"></a>页面绑定</h3><p>前面我们给页面抽象了数据和事件，现在要做的是把它们绑定到我们的页面里，我们要先来看看 Element 是怎么设置数据和配置的。</p>
<h4 id="0-Vue-绑定语法"><a href="#0-Vue-绑定语法" class="headerlink" title="0. Vue 绑定语法"></a>0. Vue 绑定语法</h4><p>既然我们要把数据绑定到组件或是元素里，我们先了解下 Vue 中与数据绑定相关的，各位也可以参考<a href="https://cn.vuejs.org/v2/guide/syntax.html" target="_blank" rel="external">Vue-模板语法</a>一节内容。</p>
<p><strong>数据绑定</strong><br>我们先来看看数据绑定有哪些最基本的方式：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div></pre></td><td class="code"><pre><div class="line"><span class="comment">&lt;!-- 双大括号可绑定普通文本，此处会把 data 中的 msg 的值绑定到对应的模版上 --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">span</span>&gt;</span>Message: &#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line"><span class="comment">&lt;!-- 双大括号可使用 JavaScript 表达式 --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">span</span>&gt;</span>&#123;&#123; msg.split('').reverse().join('') &#125;&#125;/span&gt;</div><div class="line"><span class="comment">&lt;!-- v-html 输出的内容不会被模版引擎过滤（可参考上节内容），故需要小心 XSS 漏洞 --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">v-html</span>=<span class="string">"rawHtml"</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line"><span class="comment">&lt;!-- v-bind 可用来绑定属性（对比双大括号&#123;&#123;&#125;&#125;只能插入到节点内容中） --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-bind:id</span>=<span class="string">"dynamicId"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="comment">&lt;!-- v-bind:xxx 可缩写为 :xxx --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">:id</span>=<span class="string">"dynamicId"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">`v-bind`还可用来传参，关于 props 可以参考[Vue-Prop](https://cn.vuejs.org/v2/guide/components-props.html)一节:</div><div class="line"></div><div class="line">``` html</div><div class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></div><div class="line">  <span class="comment">&lt;!-- 这里传入 tableData 给到 my-table 组件的 data 值里 --&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">my-table</span> <span class="attr">:data</span>=<span class="string">"tableData"</span>&gt;</span><span class="tag">&lt;/<span class="name">my-table</span>&gt;</span></div><div class="line">  <span class="comment">&lt;!-- my-table 组件中可以通过 props 中获取到这个值 --&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></div><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</div><div class="line">  <span class="attr">props</span>: &#123;</div><div class="line">    <span class="attr">data</span>: &#123;</div><div class="line">      <span class="attr">type</span>: <span class="built_in">Array</span>, <span class="comment">// 这是个数组</span></div><div class="line">      <span class="keyword">default</span>: <span class="function"><span class="params">()</span> =&gt;</span> &#123;&#125;, <span class="comment">// 默认值为空数组 []</span></div><div class="line">    &#125;</div><div class="line">  &#125;,</div><div class="line">  <span class="attr">methods</span>: &#123;</div><div class="line">    someFunction()&#123;</div><div class="line">      <span class="comment">// 可以获取到传入 props 中的 data 值，为父组件中的 tableData 变量</span></div><div class="line">      <span class="built_in">console</span>.log(<span class="keyword">this</span>.data); </div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">&#125;</div><div class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure>
<p>父子组件间的数据传递，通常通过 props 和事件进行传递（父组件通过 props 绑定数据给到子组件，通过事件监听获取子组件的数据更新），当然也可以自定义一些状态机制来传递，也可以使用<a href="https://vuex.vuejs.org/zh/guide/" target="_blank" rel="external">Vuex</a>、<a href="https://cn.rx.js.org/" target="_blank" rel="external">Rxjs</a>这种状态管理的工具。</p>
<p><strong>事件绑定</strong><br>我们来看看，在 Vue 里是怎样进行事件绑定的：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="comment">&lt;!-- v-on:事件名 可以绑定事件监听，在事件触发的时候，则会执行绑定的 js 代码 --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">"counter += 1"</span>&gt;</span>Add 1<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line"><span class="comment">&lt;!-- v-on:事件名 可以缩写为 @事件名 --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"counter += 1"</span>&gt;</span>Add 1<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line"><span class="comment">&lt;!-- 事件绑定除了简单的 js 代码，还可以绑定 methods 里的函数 --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"counterAddOne"</span>&gt;</span>Add 1<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div></pre></td></tr></table></figure>
<p>事件监听还能用于父子组件的事件传递：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div></pre></td><td class="code"><pre><div class="line"><span class="comment">&lt;!-- 我是子组件 --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></div><div class="line">  <span class="comment">&lt;!-- v-model 请参考后面的说明 --&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">v-model</span>=<span class="string">"val"</span> /&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"clickDone"</span>&gt;</span>done<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></div><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</div><div class="line">  data()&#123;</div><div class="line">    <span class="keyword">return</span> &#123;</div><div class="line">      <span class="attr">val</span>: <span class="string">''</span> <span class="comment">// 输入框的值</span></div><div class="line">    &#125;</div><div class="line">  &#125;,</div><div class="line">  <span class="attr">methods</span>: &#123;</div><div class="line">    clickDone()&#123;</div><div class="line">      <span class="comment">// 触发一个 done 名字的事件，把输入框的值传递出去</span></div><div class="line">      <span class="keyword">this</span>.$emit(<span class="string">'done'</span>, <span class="keyword">this</span>.val);</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">&#125;</div><div class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- 我是父组件 --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></div><div class="line">  <span class="comment">&lt;!-- 监听下子组件的 done 事件 --&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">child-component</span> @<span class="attr">done</span>=<span class="string">"getChildData"</span>&gt;</span><span class="tag">&lt;/<span class="name">child-component</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></div><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</div><div class="line">  <span class="attr">methods</span>: &#123;</div><div class="line">    getChildData(value)&#123;</div><div class="line">      <span class="comment">// 参数 value，是子组件触发事件时传的参数，这里是输入框的值</span></div><div class="line">      alert(value);</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">&#125;</div><div class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure>
<p>关于 Vue 的事件，还有很多方便的用法噢（例如过滤某个按键等），可以参考<a href="https://cn.vuejs.org/v2/guide/events.html" target="_blank" rel="external">Vue-事件处理</a>一节内容，以及<a href="https://cn.vuejs.org/v2/guide/components-custom-events.html" target="_blank" rel="external">Vue-自定义事件</a>一节内容。</p>
<p><strong>表单绑定</strong><br>Vue 里有个很好用的指令<code>v-model</code>，常常用来绑定表单的值，可以参考<a href="https://cn.vuejs.org/v2/guide/forms.html" target="_blank" rel="external">Vue-表单输入绑定</a>一节内容。但其实<code>v-model</code>也是语法糖，最终是通过前面的数据和事件绑定结合实现的：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></div><div class="line">  <span class="comment">&lt;!-- 事件绑定除了简单的 js 代码，还可以绑定 methods 里的函数 --&gt;</span></div><div class="line">  <span class="comment">&lt;!-- 例如我们最简单的 v-model 指令，其实是下面的语法糖 --&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">:value</span>=<span class="string">"val"</span> @<span class="attr">input</span>=<span class="string">"updateValue"</span> /&gt;</span></div><div class="line">  <span class="comment">&lt;!-- 它也可以写成 v-model --&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">v-model</span>=<span class="string">"val"</span> /&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></div><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</div><div class="line">  data()&#123;</div><div class="line">    <span class="keyword">return</span> &#123;</div><div class="line">      <span class="attr">val</span>: <span class="string">''</span></div><div class="line">    &#125;</div><div class="line">  &#125;,</div><div class="line">  <span class="attr">methods</span>: &#123;</div><div class="line">    updateValue(event)&#123;</div><div class="line">      <span class="keyword">this</span>.val = event.target.value;</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">&#125;</div><div class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure>
<p><code>v-model</code>也可以自定义表单绑定，可参考<a href="https://godbasin.github.io/2018/01/21/vue2-notes-15-custom-v-model/">《Vue2使用笔记15–自定义的表单组件》</a>一文。</p>
<p>其他的，还有挺常用的一些指令（例如<code>v-if</code>条件、<code>v-for</code>遍历），可以参考<a href="https://cn.vuejs.org/v2/guide/conditional.html" target="_blank" rel="external">条件渲染</a>和<a href="https://cn.vuejs.org/v2/guide/list.html" target="_blank" rel="external">列表渲染</a>，当然你还可以自行开发<a href="https://cn.vuejs.org/v2/guide/custom-directive.html" target="_blank" rel="external">自定义指令</a>，可参考<a href="https://godbasin.github.io/2018/01/27/vue2-notes-16-custom-directive/">《Vue2使用笔记16–自定义指令》</a>一文。</p>
<h4 id="1-菜单绑定"><a href="#1-菜单绑定" class="headerlink" title="1. 菜单绑定"></a>1. 菜单绑定</h4><p>我们先来看看 Elmenet 里的菜单是怎么用的，可以参考<a href="https://element.eleme.cn/#/zh-CN/component/menu" target="_blank" rel="external">Element-NavMenu导航菜单文档</a>：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></td><td class="code"><pre><div class="line"><span class="comment">&lt;!-- default-openeds 为默认展开的菜单项，以 index 序号 --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">el-menu</span> <span class="attr">:default-openeds</span>=<span class="string">"['1', '3']"</span>&gt;</span></div><div class="line">  <span class="comment">&lt;!-- el-submenu 为带子菜单的父菜单，index 为每组菜单的序号 --&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">el-submenu</span> <span class="attr">index</span>=<span class="string">"1"</span>&gt;</span></div><div class="line">    <span class="comment">&lt;!-- 下面是父菜单内容，包括父菜单 icon 和父菜单名字 --&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">template</span> <span class="attr">slot</span>=<span class="string">"title"</span>&gt;</span><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"el-icon-message"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span>导航一<span class="tag">&lt;/<span class="name">template</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">el-menu-item-group</span>&gt;</span></div><div class="line">      <span class="comment">&lt;!-- 子菜单选项，包括 index 序号和子菜单名字 --&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">el-menu-item</span> <span class="attr">index</span>=<span class="string">"1-1"</span>&gt;</span>选项1<span class="tag">&lt;/<span class="name">el-menu-item</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">el-menu-item</span> <span class="attr">index</span>=<span class="string">"1-2"</span>&gt;</span>选项2<span class="tag">&lt;/<span class="name">el-menu-item</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">el-menu-item-group</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">el-submenu</span>&gt;</span></div><div class="line">  <span class="comment">&lt;!-- el-menu-item 为不带子菜单的父菜单，index 为每组菜单的序号 --&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">el-menu-item</span> <span class="attr">index</span>=<span class="string">"2"</span>&gt;</span></div><div class="line">    <span class="comment">&lt;!-- 父菜单内容，包括父菜单 icon 和父菜单名字 --&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"el-icon-menu"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">slot</span>=<span class="string">"title"</span>&gt;</span>导航二<span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">el-menu-item</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">el-menu</span>&gt;</span></div></pre></td></tr></table></figure>
<p>绑定数据之后，就会变成这样啦：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div></pre></td><td class="code"><pre><div class="line"><span class="comment">&lt;!-- 顺便调整了下颜色 --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">el-menu</span> <span class="attr">:default-openeds</span>=<span class="string">"['0', '1']"</span> <span class="attr">class</span>=<span class="string">"el-menu-vertical-demo"</span></span></div><div class="line">   <span class="attr">background-color</span>=<span class="string">"#545c64"</span> <span class="attr">text-color</span>=<span class="string">"#fff"</span> <span class="attr">active-text-color</span>=<span class="string">"#ffd04b"</span></div><div class="line">  &gt;</div><div class="line">  <span class="comment">&lt;!-- 遍历生成父菜单选项 --&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">template</span> <span class="attr">v-for</span>=<span class="string">"menu in menus"</span>&gt;</span></div><div class="line">    <span class="comment">&lt;!-- 有子菜单的时候，就用 el-submenu，再绑个序号 index --&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">el-submenu</span> <span class="attr">v-if</span>=<span class="string">"menu.subMenus &amp;&amp; menu.subMenus.length"</span> <span class="attr">:index</span>=<span class="string">"menu.index"</span> <span class="attr">:key</span>=<span class="string">"menu.index"</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">template</span> <span class="attr">slot</span>=<span class="string">"title"</span>&gt;</span></div><div class="line">        <span class="comment">&lt;!-- 绑个父菜单的 icon --&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">i</span> <span class="attr">:class</span>=<span class="string">"menu.icon"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></div><div class="line">        <span class="comment">&lt;!-- 再绑个父菜单的名称 text --&gt;</span></div><div class="line">        <span class="comment">&lt;!-- slot 其实类似于占位符，可以去 Vue 官方文档了解一下插槽 --&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">span</span> <span class="attr">slot</span>=<span class="string">"title"</span>&gt;</span>&#123;&#123;menu.text&#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line">      <span class="tag">&lt;/<span class="name">template</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">el-menu-item-group</span>&gt;</span></div><div class="line">        <span class="comment">&lt;!-- 子菜单也要遍历，同时绑上子菜单名称 text，也要绑个序号 index --&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">el-menu-item</span> <span class="attr">v-for</span>=<span class="string">"subMenu in menu.subMenus"</span> <span class="attr">:key</span>=<span class="string">"subMenu.index"</span> <span class="attr">:index</span>=<span class="string">"subMenu.index"</span>&gt;</span>&#123;&#123;subMenu.text&#125;&#125;<span class="tag">&lt;/<span class="name">el-menu-item</span>&gt;</span></div><div class="line">      <span class="tag">&lt;/<span class="name">el-menu-item-group</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">el-submenu</span>&gt;</span></div><div class="line">    <span class="comment">&lt;!-- 没子菜单的时候，就用 el-menu-item，也要绑个序号 index --&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">el-menu-item</span> <span class="attr">v-else</span> <span class="attr">:index</span>=<span class="string">"menu.index"</span> <span class="attr">:key</span>=<span class="string">"menu.index"</span>&gt;</span></div><div class="line">      <span class="comment">&lt;!-- 绑个父菜单的 icon --&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">i</span> <span class="attr">:class</span>=<span class="string">"menu.icon"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></div><div class="line">      <span class="comment">&lt;!-- 再绑个父菜单的名称 text --&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">span</span> <span class="attr">slot</span>=<span class="string">"title"</span>&gt;</span>&#123;&#123;menu.text&#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">el-menu-item</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">template</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">el-menu</span>&gt;</span></div></pre></td></tr></table></figure>
<p>我们之前的 menus 并没有<code>index</code>，这里可以顺便遍历生成一下：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">menus = menus.map(<span class="function">(<span class="params">x, i</span>) =&gt;</span> &#123;</div><div class="line">  <span class="keyword">return</span> &#123;</div><div class="line">    ...x,</div><div class="line">    <span class="comment">// 子菜单就拼接$&#123;父菜单index&#125;-$&#123;子菜单index&#125;</span></div><div class="line">    subMenus: <span class="function">(<span class="params">x.subMenus || []</span>).<span class="params">map</span>(<span class="params">(y, j</span>) =&gt;</span> &#123;</div><div class="line">      <span class="keyword">return</span> &#123; ...y, <span class="attr">index</span>: <span class="string">`<span class="subst">$&#123;i&#125;</span>-<span class="subst">$&#123;j&#125;</span>`</span> &#125;;</div><div class="line">    &#125;),</div><div class="line">    <span class="comment">// 父菜单就把 index 加上好了</span></div><div class="line">    index: <span class="string">`<span class="subst">$&#123;i&#125;</span>`</span></div><div class="line">  &#125;;</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>看~菜单成功生成了：<br><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/vue-for-everyone-2-10.png" alt=""></p>
<h4 id="2-列表绑定"><a href="#2-列表绑定" class="headerlink" title="2. 列表绑定"></a>2. 列表绑定</h4><p>Demo 里的列表是不带操作按钮的，我们参考<a href="https://element.eleme.cn/#/zh-CN/component/table" target="_blank" rel="external">Element-Table表格文档</a>以及<a href="https://element.eleme.cn/#/zh-CN/component/button" target="_blank" rel="external">Button按钮文档</a>把自定义选项加上：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div></pre></td><td class="code"><pre><div class="line"><span class="comment">&lt;!-- data 里绑定表格数据，同时这里调整了下样式 --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">el-table</span> <span class="attr">stripe</span> <span class="attr">:data</span>=<span class="string">"tableData"</span> <span class="attr">style</span>=<span class="string">"border: 1px solid #ebebeb;border-radius: 3px;margin-top: 10px;"</span>&gt;</span></div><div class="line">  <span class="comment">&lt;!-- prop 传绑定 tableData 的数据 id，表头名称 id，同时设了下宽度 --&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">el-table-column</span> <span class="attr">prop</span>=<span class="string">"id"</span> <span class="attr">label</span>=<span class="string">"id"</span> <span class="attr">width</span>=<span class="string">"100"</span>&gt;</span><span class="tag">&lt;/<span class="name">el-table-column</span>&gt;</span></div><div class="line">  <span class="comment">&lt;!-- prop 传绑定 tableData 的数据 date，表头名称日期 --&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">el-table-column</span> <span class="attr">prop</span>=<span class="string">"date"</span> <span class="attr">label</span>=<span class="string">"日期"</span> <span class="attr">width</span>=<span class="string">"200"</span>&gt;</span><span class="tag">&lt;/<span class="name">el-table-column</span>&gt;</span></div><div class="line">  <span class="comment">&lt;!-- prop 传绑定 tableData 的数据 name，表头名称姓名 --&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">el-table-column</span> <span class="attr">prop</span>=<span class="string">"name"</span> <span class="attr">label</span>=<span class="string">"姓名"</span> <span class="attr">width</span>=<span class="string">"200"</span>&gt;</span><span class="tag">&lt;/<span class="name">el-table-column</span>&gt;</span></div><div class="line">  <span class="comment">&lt;!-- prop 传绑定 tableData 的数据 phone，表头名称电话 --&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">el-table-column</span> <span class="attr">prop</span>=<span class="string">"phone"</span> <span class="attr">label</span>=<span class="string">"电话"</span> <span class="attr">width</span>=<span class="string">"200"</span>&gt;</span><span class="tag">&lt;/<span class="name">el-table-column</span>&gt;</span></div><div class="line">  <span class="comment">&lt;!-- prop 传绑定 tableData 的数据 address，表头名称地址 --&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">el-table-column</span> <span class="attr">prop</span>=<span class="string">"address"</span> <span class="attr">label</span>=<span class="string">"地址"</span>&gt;</span><span class="tag">&lt;/<span class="name">el-table-column</span>&gt;</span></div><div class="line">  <span class="comment">&lt;!-- 该列固定在右侧，表头名称操作 --&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">el-table-column</span> <span class="attr">fixed</span>=<span class="string">"right"</span> <span class="attr">label</span>=<span class="string">"操作"</span> <span class="attr">width</span>=<span class="string">"300"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">template</span> <span class="attr">slot-scope</span>=<span class="string">"scope"</span>&gt;</span></div><div class="line">      <span class="comment">&lt;!-- 添加了个删除按钮，绑定了前面定义的删除事件 deleteTableItem，传入参数 id --&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">el-button</span> @<span class="attr">click</span>=<span class="string">"deleteTableItem(scope.row.id)"</span> <span class="attr">type</span>=<span class="string">"danger"</span> <span class="attr">size</span>=<span class="string">"small"</span>&gt;</span>删除<span class="tag">&lt;/<span class="name">el-button</span>&gt;</span></div><div class="line">      <span class="comment">&lt;!-- 分别添加了上移和下移按钮，绑定了前面定义的移动事件 moveTableItem，传入参数 id 和移动方向 --&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">el-button</span> @<span class="attr">click</span>=<span class="string">"moveTableItem(scope.row.id, 'up')"</span> <span class="attr">size</span>=<span class="string">"small"</span>&gt;</span>上移<span class="tag">&lt;/<span class="name">el-button</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">el-button</span> @<span class="attr">click</span>=<span class="string">"moveTableItem(scope.row.id, 'down')"</span> <span class="attr">size</span>=<span class="string">"small"</span>&gt;</span>下移<span class="tag">&lt;/<span class="name">el-button</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">template</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">el-table-column</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">el-table</span>&gt;</span></div></pre></td></tr></table></figure>
<p>然后我们就顺利获得了这样一个列表：<br><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/vue-for-everyone-2-11.jpg" alt=""></p>
<h4 id="3-表单绑定"><a href="#3-表单绑定" class="headerlink" title="3. 表单绑定"></a>3. 表单绑定</h4><p>有列表的地方，当然也少不了表单啦<del>那么，同样的方法，我们直接去<a href="https://element.eleme.cn/#/zh-CN/component/form" target="_blank" rel="external">Element-Form表单</a>这里偷代码吧</del>因为这里打算用弹窗的方式来装这个表单的内容，所以我们也抠了<a href="https://element.eleme.cn/#/zh-CN/component/dialog" target="_blank" rel="external">Element-Dialog对话框</a>的代码出来~</p>
<p>有了前面数据设计和绑定的基础，这里可以直接给出我们的代码：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div></pre></td><td class="code"><pre><div class="line"><span class="comment">&lt;!-- 找个地方添加一个新增的按钮，点击的时候出现表单的弹窗，以及把表单内容设置为初始值 --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">el-button</span> <span class="attr">type</span>=<span class="string">"primary"</span> @<span class="attr">click</span>=<span class="string">"dialogFormVisible = true;form = &#123;&#125;;"</span>&gt;</span>新增<span class="tag">&lt;/<span class="name">el-button</span>&gt;</span></div><div class="line"><span class="comment">&lt;!-- Form --&gt;</span></div><div class="line"><span class="comment">&lt;!-- el-dialog 是弹窗样式，title 绑定弹窗的标题内容，visible 绑定弹窗是否展示 --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">el-dialog</span> <span class="attr">title</span>=<span class="string">"新增"</span> <span class="attr">:visible.sync</span>=<span class="string">"dialogFormVisible"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">el-form</span> <span class="attr">:model</span>=<span class="string">"form"</span>&gt;</span></div><div class="line">    <span class="comment">&lt;!-- el-form-item 绑定表单样式，label 表单的名称，formLabelWidth 设置 label 的宽度 --&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">el-form-item</span> <span class="attr">label</span>=<span class="string">"日期"</span> <span class="attr">:label-width</span>=<span class="string">"formLabelWidth"</span>&gt;</span></div><div class="line">      <span class="comment">&lt;!-- 里面装载表单元素，这里装了个选择日期的组件，v-model 绑定选择值，value-format设置绑定值的格式，type 设置选择的范围，这里 date 表示到天 --&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">el-date-picker</span> <span class="attr">v-model</span>=<span class="string">"form.date"</span> <span class="attr">value-format</span>=<span class="string">"yyyy-MM-dd"</span> <span class="attr">type</span>=<span class="string">"date"</span> <span class="attr">placeholder</span>=<span class="string">"选择日期"</span>&gt;</span><span class="tag">&lt;/<span class="name">el-date-picker</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">el-form-item</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">el-form-item</span> <span class="attr">label</span>=<span class="string">"姓名"</span> <span class="attr">:label-width</span>=<span class="string">"formLabelWidth"</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">el-input</span> <span class="attr">v-model</span>=<span class="string">"form.name"</span>&gt;</span><span class="tag">&lt;/<span class="name">el-input</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">el-form-item</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">el-form-item</span> <span class="attr">label</span>=<span class="string">"电话"</span> <span class="attr">:label-width</span>=<span class="string">"formLabelWidth"</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">el-input</span> <span class="attr">v-model</span>=<span class="string">"form.phone"</span> <span class="attr">type</span>=<span class="string">"tel"</span>&gt;</span><span class="tag">&lt;/<span class="name">el-input</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">el-form-item</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">el-form-item</span> <span class="attr">label</span>=<span class="string">"地址"</span> <span class="attr">:label-width</span>=<span class="string">"formLabelWidth"</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">el-input</span> <span class="attr">v-model</span>=<span class="string">"form.address"</span>&gt;</span><span class="tag">&lt;/<span class="name">el-input</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">el-form-item</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">el-form</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">slot</span>=<span class="string">"footer"</span> <span class="attr">class</span>=<span class="string">"dialog-footer"</span>&gt;</span></div><div class="line">    <span class="comment">&lt;!-- 点击取消的时候，设置弹窗不可见 --&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">el-button</span> @<span class="attr">click</span>=<span class="string">"dialogFormVisible = false"</span>&gt;</span>取 消<span class="tag">&lt;/<span class="name">el-button</span>&gt;</span></div><div class="line">    <span class="comment">&lt;!-- 点击确定的时候，设置弹窗不可见，同时添加一项内容 --&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">el-button</span> <span class="attr">type</span>=<span class="string">"primary"</span> @<span class="attr">click</span>=<span class="string">"dialogFormVisible = false; addTableItem(form)"</span>&gt;</span>确 定<span class="tag">&lt;/<span class="name">el-button</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">el-dialog</span>&gt;</span></div></pre></td></tr></table></figure>
<p>我们需要新增的数据变量包括：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</div><div class="line">  data() &#123;</div><div class="line">    <span class="keyword">return</span> &#123;</div><div class="line">      <span class="attr">dialogFormVisible</span>: <span class="literal">false</span>, <span class="comment">// 弹窗是否出现</span></div><div class="line">      form: &#123;&#125;, <span class="comment">// 用作表单绑定的内容</span></div><div class="line">      formLabelWidth: <span class="string">'120px'</span>, <span class="comment">// 表单 label 的宽度</span></div><div class="line">    &#125;;</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>Okay，我们的表单就写好了：<br><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/vue-for-everyone-2-12.jpg" alt=""></p>
<h3 id="课后作业"><a href="#课后作业" class="headerlink" title="课后作业"></a>课后作业</h3><p>其实到这里，我们已经成功地东拼西凑成一个带菜单、列表和表单的页面了，这也是我们在管理端里最常见的一种页面类型。</p>
<p>这个页面也有挺多可以完善的地方，例如：</p>
<ol>
<li>左侧菜单可以支持收起。</li>
<li>列表支持修改。</li>
<li>列表支持批量删除。</li>
<li>表单支持校验手机号和其他选项不为空。</li>
</ol>
<p>这些就当作课后作业来完成吧，如果很懒的你，也可以直接看最终结果：</p>
<ul>
<li><a href="http://vue-for-everyone.godbasin.com/2/index.html" target="_blank" rel="external">页面的效果查看</a></li>
<li><a href="https://github.com/godbasin/vue-element-demo/tree/master/2" target="_blank" rel="external">页面代码查看</a></li>
</ul>
<h2 id="结束语"><a href="#结束语" class="headerlink" title="结束语"></a>结束语</h2><hr>
<p>其实前端发展到现在，已经有很多开源轮子了。所以前端开发的效率在不断提升，会让人有种我很厉害的幻觉。而常常在这样的幻觉消失之后，会发现自己除了会用工具以外，什么都没剩下了。为了避免陷入恐慌的这一天到来，我们应该沉静下来，缺啥补啥，相对于囫囵吞枣，更应该多深入理解和研究下。</p>
  
		
		<p style="margin-top:50px;">
			查看Github有更多内容噢：<a href="https://github.com/godbasin">https://github.com/godbasin</a>
			<br>
			更欢迎来<a href="https://godbasin.github.io/front-end-playground">被删的前端游乐场</a>边撸猫边学前端噢
		</p>
	</div>
	<img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/2code2.jpg" width="200" height="200" style="display:block;margin: 0 auto;" />
	<p style="text-align: center;margin-top: 10px;margin-bottom: 20px;">码生艰难，写文不易，给我家猪囤点猫粮了喵~</p>
	<div class="author-right">
  		<p>作者：被删</p>
  		<p>出处：<a href="https://godbasin.github.io">https://godbasin.github.io</a></p>
  		<p>本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。</p>
	</div>
		<footer class="article-footer clearfix">

  <div class="article-tags">
  
  <span></span> <a href="/tags/教程/">教程</a>
  </div>


<div class="article-categories">
  <span></span>
  <a class="article-category-link" href="/categories/vue八宝粥/">vue八宝粥</a>
</div>



<div class="article-share" id="share">

  
<!-- JiaThis Button BEGIN -->
<div class="jiathis_style_24x24">
	<a class="jiathis_button_qzone"></a>
	<a class="jiathis_button_tsina"></a>
	<a class="jiathis_button_tqq"></a>
	<a class="jiathis_button_weixin"></a>
	<a class="jiathis_button_renren"></a>
	<a href="http://www.jiathis.com/share?uid=2134021" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>
</div>
<script type="text/javascript">
var jiathis_config = {data_track_clickback:'true'};
</script>
<script type="text/javascript" src="http://v3.jiathis.com/code_mini/jia.js?uid=2134021" charset="utf-8"></script>
<!-- JiaThis Button END -->   


</div>
</footer>   	       
	</article>
	
<nav class="article-nav clearfix">
 
 <div class="prev" >
 <a href="/2019/07/15/wxapp-latest-20190715/" title="小程序开发月刊第七期（20190715）">
  <strong>PREVIOUS:</strong><br/>
  <span>
  小程序开发月刊第七期（20190715）</span>
</a>
</div>


<div class="next">
<a href="/2019/06/30/about-front-end-2-principle/"  title="前端这几年--2.工作原则和选择">
 <strong>NEXT:</strong><br/> 
 <span>前端这几年--2.工作原则和选择
</span>
</a>
</div>

</nav>

	<!-- 如果不是首页且没使用 `comments: false` 关闭评论，则尝试加载评论 -->

    <!-- 配置中启用多说时，导入相应代码 -->
    


</div>  
      <div class="openaside"><a class="navbutton" href="#" title="显示侧边栏"></a></div>

  <div id="toc" class="toc-aside">
  <strong class="toc-title">文章目录</strong>
  <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Vue基本概念"><span class="toc-number">1.</span> <span class="toc-text">Vue基本概念</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue组件"><span class="toc-number">1.1.</span> <span class="toc-text">Vue组件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#生命周期"><span class="toc-number">1.1.1.</span> <span class="toc-text">生命周期</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#数据"><span class="toc-number">1.1.2.</span> <span class="toc-text">数据</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-菜单"><span class="toc-number">1.1.2.1.</span> <span class="toc-text">1. 菜单</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-列表"><span class="toc-number">1.1.2.2.</span> <span class="toc-text">2. 列表</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#方法"><span class="toc-number">1.1.3.</span> <span class="toc-text">方法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#组件"><span class="toc-number">1.2.</span> <span class="toc-text">组件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#组件的自我修养"><span class="toc-number">1.2.1.</span> <span class="toc-text">组件的自我修养</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Vue-组件"><span class="toc-number">1.2.2.</span> <span class="toc-text">Vue 组件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Element"><span class="toc-number">1.2.3.</span> <span class="toc-text">Element</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-使用-Element"><span class="toc-number">1.2.3.1.</span> <span class="toc-text">1. 使用 Element</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-使用-Element-组件"><span class="toc-number">1.2.3.2.</span> <span class="toc-text">2. 使用 Element 组件</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#页面绑定"><span class="toc-number">1.2.4.</span> <span class="toc-text">页面绑定</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#0-Vue-绑定语法"><span class="toc-number">1.2.4.1.</span> <span class="toc-text">0. Vue 绑定语法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-菜单绑定"><span class="toc-number">1.2.4.2.</span> <span class="toc-text">1. 菜单绑定</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-列表绑定"><span class="toc-number">1.2.4.3.</span> <span class="toc-text">2. 列表绑定</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-表单绑定"><span class="toc-number">1.2.4.4.</span> <span class="toc-text">3. 表单绑定</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#课后作业"><span class="toc-number">1.2.5.</span> <span class="toc-text">课后作业</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#结束语"><span class="toc-number">1.3.</span> <span class="toc-text">结束语</span></a></li></ol></li></ol>
  </div>

<div id="asidepart">
<div class="closeaside"><a class="closebutton" href="#" title="隐藏侧边栏"></a></div>
<aside class="clearfix">

  	
	<div class="archiveslist">
		<p class="asidetitle">最近文章</p>
			<ul class="archive-list">
			
					
				<li class="archive-list-item">
					<a class="archive-list-link" href="/2019/11/15/wxapp-latest-20191115/" title="小程序开发月刊第11期（20191115）">小程序开发月刊第11期（201911...</a>
				</li>
				
			
					
				<li class="archive-list-item">
					<a class="archive-list-link" href="/2019/11/10/change-log/" title="前端 CHANGELOG 生成指南">前端 CHANGELOG 生成指南...</a>
				</li>
				
			
					
				<li class="archive-list-item">
					<a class="archive-list-link" href="/2019/11/09/wxapp-global-data-behavior/" title="小程序的奇技淫巧 -- globalDataBehavior管理全局状态">小程序的奇技淫巧 -- global...</a>
				</li>
				
			
					
				<li class="archive-list-item">
					<a class="archive-list-link" href="/2019/10/15/wxapp-latest-20191015/" title="小程序开发月刊第十期（20191015）">小程序开发月刊第十期（2019101...</a>
				</li>
				
			
					
				<li class="archive-list-item">
					<a class="archive-list-link" href="/2019/10/13/about-front-end-3-growth/" title="前端这几年--3.关于成长和焦虑">前端这几年--3.关于成长和焦虑...</a>
				</li>
				
			
					
				<li class="archive-list-item">
					<a class="archive-list-link" href="/2019/09/16/wxapp-latest-20190916/" title="小程序开发月刊第九期（20190916）">小程序开发月刊第九期（2019091...</a>
				</li>
				
			
					
				<li class="archive-list-item">
					<a class="archive-list-link" href="/2019/08/15/wxapp-latest-20190815/" title="小程序开发月刊第八期（20190815）">小程序开发月刊第八期（2019081...</a>
				</li>
				
			
					
				<li class="archive-list-item">
					<a class="archive-list-link" href="/2019/07/27/front-end-playground/" title="被删的前端游乐场建成！">被删的前端游乐场建成！</a>
				</li>
				
			
					
				<li class="archive-list-item">
					<a class="archive-list-link" href="/2019/07/21/vue-for-everyone-3/" title="9102全员学Vue--3.把页面拼成个Web应用">9102全员学Vue--3.把页面拼...</a>
				</li>
				
			
					
				<li class="archive-list-item">
					<a class="archive-list-link" href="/2019/07/15/wxapp-latest-20190715/" title="小程序开发月刊第七期（20190715）">小程序开发月刊第七期（2019071...</a>
				</li>
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
			</ul>
	</div>


  
  <div class="archiveslist">
    <p class="asidetitle"><a href="/archives">归档</a></p>
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/11/">十一月 2019</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/10/">十月 2019</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/09/">九月 2019</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/08/">八月 2019</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/07/">七月 2019</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/06/">六月 2019</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/05/">五月 2019</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/04/">四月 2019</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/03/">三月 2019</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/02/">二月 2019</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/01/">一月 2019</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/12/">十二月 2018</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/11/">十一月 2018</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/10/">十月 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/09/">九月 2018</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/08/">八月 2018</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/07/">七月 2018</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/06/">六月 2018</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/05/">五月 2018</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/04/">四月 2018</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/03/">三月 2018</a><span class="archive-list-count">7</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/02/">二月 2018</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/01/">一月 2018</a><span class="archive-list-count">9</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/12/">十二月 2017</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/11/">十一月 2017</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/10/">十月 2017</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/09/">九月 2017</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/08/">八月 2017</a><span class="archive-list-count">11</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/07/">七月 2017</a><span class="archive-list-count">9</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/06/">六月 2017</a><span class="archive-list-count">10</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/05/">五月 2017</a><span class="archive-list-count">15</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/04/">四月 2017</a><span class="archive-list-count">7</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/03/">三月 2017</a><span class="archive-list-count">10</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/02/">二月 2017</a><span class="archive-list-count">41</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/01/">一月 2017</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/12/">十二月 2016</a><span class="archive-list-count">7</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/11/">十一月 2016</a><span class="archive-list-count">9</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/10/">十月 2016</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/09/">九月 2016</a><span class="archive-list-count">7</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/08/">八月 2016</a><span class="archive-list-count">9</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/07/">七月 2016</a><span class="archive-list-count">14</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/06/">六月 2016</a><span class="archive-list-count">9</span></li></ul>
  </div>


  
<div class="archiveslist">
	<p class="asidetitle"><a href="/categories">分类</a></p>
		<ul class="archive-list">
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/CSS炒饭/" title="CSS炒饭">CSS炒饭<sup>3</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/D3小馒头/" title="D3小馒头">D3小馒头<sup>8</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/angular2火锅/" title="angular2火锅">angular2火锅<sup>25</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/angular混搭/" title="angular混搭">angular混搭<sup>33</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/box2djs方糖/" title="box2djs方糖">box2djs方糖<sup>34</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/cyclejs哈根达斯/" title="cyclejs哈根达斯">cyclejs哈根达斯<sup>8</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/jQuery杂烩/" title="jQuery杂烩">jQuery杂烩<sup>3</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/js什锦/" title="js什锦">js什锦<sup>26</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/react沙拉/" title="react沙拉">react沙拉<sup>16</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/three-js奶茶/" title="three.js奶茶">three.js奶茶<sup>5</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/vue八宝粥/" title="vue八宝粥">vue八宝粥<sup>29</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/webpack宾治/" title="webpack宾治">webpack宾治<sup>9</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/web乱炖/" title="web乱炖">web乱炖<sup>2</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/前端满汉全席/" title="前端满汉全席">前端满汉全席<sup>8</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/喵/" title="喵">喵<sup>2</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/小程序双皮奶/" title="小程序双皮奶">小程序双皮奶<sup>27</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/工作这杯茶/" title="工作这杯茶">工作这杯茶<sup>5</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/应用巧克力盒/" title="应用巧克力盒">应用巧克力盒<sup>2</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/思想棉花糖/" title="思想棉花糖">思想棉花糖<sup>8</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/柴米油盐工具集/" title="柴米油盐工具集">柴米油盐工具集<sup>1</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/自动化甜筒/" title="自动化甜筒">自动化甜筒<sup>1</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/非前端钙片/" title="非前端钙片">非前端钙片<sup>7</sup></a>
			</li>
		
		</ul>
</div>


  
<div class="archiveslist">
	<p class="asidetitle">标签</p>
		<ul class="archive-list">
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/tags/分享/" title="分享">分享<sup>44</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/tags/原创部件/" title="原创部件">原创部件<sup>1</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/tags/心态/" title="心态">心态<sup>5</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/tags/教程/" title="教程">教程<sup>73</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/tags/晒猫/" title="晒猫">晒猫<sup>2</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/tags/笔记/" title="笔记">笔记<sup>121</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/tags/算法/" title="算法">算法<sup>9</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/tags/自制插件/" title="自制插件">自制插件<sup>2</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/tags/逻辑实现/" title="逻辑实现">逻辑实现<sup>5</sup></a>
			</li>
		
		</ul>
</div>


    <div class="archiveslist">
    <p class="asidetitle"><a href="/archives">about</a></p>
      <ul class="archive-list">
      	<li class="archive-list-item">
      		<a>wangbeishan@163.com</a>
      		<a href="https://github.com/godbasin">github.com/godbasin</a>
      	</li>
      </ul>
  </div>

  <div class="rsspart">
	<a href="/atom.xml" target="_blank" title="rss">RSS 订阅</a>
</div>

</aside>
</div>
    </div>
    <footer><div id="footer" >
	
	<section class="info">
		<p> 即使梦想再小，却很伟大 ^_^ </p>
	</section>
	 
		<p class="copyright">Powered by <a href="http://hexo.io" target="_blank" title="hexo">hexo</a> and Theme by <a href="https://github.com/A-limon/pacman" target="_blank" title="Pacman">Pacman</a> © 2019 
		
		<a href="https://godbasin.github.io" target="_blank" title="被删">被删</a>
		
		</p>
</div>
</footer>
    <script src="/js/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
  $('.navbar').click(function(){
    $('header nav').toggleClass('shownav');
  });
  var myWidth = 0;
  function getSize(){
    if( typeof( window.innerWidth ) == 'number' ) {
      myWidth = window.innerWidth;
    } else if( document.documentElement && document.documentElement.clientWidth) {
      myWidth = document.documentElement.clientWidth;
    };
  };
  var m = $('#main'),
      a = $('#asidepart'),
      c = $('.closeaside'),
      o = $('.openaside');
  $(window).resize(function(){
    getSize(); 
    if (myWidth >= 1024) {
      $('header nav').removeClass('shownav');
    }else
    {
      m.removeClass('moveMain');
      a.css('display', 'block').removeClass('fadeOut');
      o.css('display', 'none');
      
      $('#toc.toc-aside').css('display', 'none');
        
    }
  });
  c.click(function(){
    a.addClass('fadeOut').css('display', 'none');
    o.css('display', 'block').addClass('fadeIn');
    m.addClass('moveMain');
  });
  o.click(function(){
    o.css('display', 'none').removeClass('beforeFadeIn');
    a.css('display', 'block').removeClass('fadeOut').addClass('fadeIn');      
    m.removeClass('moveMain');
  });
  $(window).scroll(function(){
    o.css("top",Math.max(80,260-$(this).scrollTop()));
  });
});
</script>

<script type="text/javascript">
$(document).ready(function(){ 
  var ai = $('.article-content>iframe'),
      ae = $('.article-content>embed'),
      t  = $('#toc'),
      h  = $('article h2')
      ah = $('article h2'),
      ta = $('#toc.toc-aside'),
      o  = $('.openaside'),
      c  = $('.closeaside');
  if(ai.length>0){
    ai.wrap('<div class="video-container" />');
  };
  if(ae.length>0){
   ae.wrap('<div class="video-container" />');
  };
  if(ah.length==0){
    t.css('display','none');
  }else{
    c.click(function(){
      ta.css('display', 'block').addClass('fadeIn');
    });
    o.click(function(){
      ta.css('display', 'none');
    });
    $(window).scroll(function(){
      ta.css("top",Math.max(140,320-$(this).scrollTop()));
    });
  };
});
</script>







  </body>
</html>
